<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成阿里icon json数据文件</title>
</head>
<style>
    .btn {
        width: 100%;
        height: 25px;
        line-height: 25px;
        background-color: #127cf3;
        color: #fff;
        border: 1px solid #fff;
    }
</style>

<body>
    <button class="btn">生成</button>
    <!-- 切换区域 SAT -->
    <ul class="icon_lists dib-box">

        <li class="dib">
            <span class="icon iconfont icon-yangpinguanli1"></span>
            <div class="name">
                样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yuanliaoguan"></span>
            <div class="name">
                原料罐
            </div>
            <div class="code-name">.icon-yuanliaoguan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bumen"></span>
            <div class="name">
                部门
            </div>
            <div class="code-name">.icon-bumen
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fuliao2"></span>
            <div class="name">
                辅料
            </div>
            <div class="code-name">.icon-fuliao2
            </div>
        </li>
        <li class="dib">
            <span class="icon iconfont icon-shebeitaizhang"></span>
            <div class="name">
                设备台账
            </div>
            <div class="code-name">.icon-shebeitaizhang
            </div>
        </li>
        <li class="dib">
            <span class="icon iconfont icon-gongyiliucheng_0"></span>
            <div class="name">
                工艺流程_0
            </div>
            <div class="code-name">.icon-gongyiliucheng_0
            </div>
        </li>
        <li class="dib">
            <span class="icon iconfont icon-gangweijibie"></span>
            <div class="name">
                岗位级别
            </div>
            <div class="code-name">.icon-gangweijibie
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-a-ziyuan524"></span>
            <div class="name">
                工艺定制
            </div>
            <div class="code-name">.icon-a-ziyuan524
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-a-Productiontaskschedule"></span>
            <div class="name">
                生产任务排程
            </div>
            <div class="code-name">.icon-a-Productiontaskschedule
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yangpinguanli2"></span>
            <div class="name">
                样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli2
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-feiliaoxiang"></span>
            <div class="name">
                废料箱
            </div>
            <div class="code-name">.icon-feiliaoxiang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-feiliaoxiang1"></span>
            <div class="name">
                废料箱
            </div>
            <div class="code-name">.icon-feiliaoxiang1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-chanpincanshu"></span>
            <div class="name">
                产品参数
            </div>
            <div class="code-name">.icon-chanpincanshu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
                订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
                通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-zidian"></span>
            <div class="name">
                字典
            </div>
            <div class="code-name">.icon-zidian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
                菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-icon-order-plan"></span>
            <div class="name">
                采购计划
            </div>
            <div class="code-name">.icon-icon-order-plan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caigoujihua"></span>
            <div class="name">
                采购计划
            </div>
            <div class="code-name">.icon-caigoujihua
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xiaoshoudingdan"></span>
            <div class="name">
                销售订单
            </div>
            <div class="code-name">.icon-xiaoshoudingdan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fuliao"></span>
            <div class="name">
                辅料
            </div>
            <div class="code-name">.icon-fuliao
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caigoudingdan"></span>
            <div class="name">
                采购订单
            </div>
            <div class="code-name">.icon-caigoudingdan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-kehu"></span>
            <div class="name">
                客户
            </div>
            <div class="code-name">.icon-kehu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-peizhiguanli"></span>
            <div class="name">
                配置管理
            </div>
            <div class="code-name">.icon-peizhiguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujubiangeng"></span>
            <div class="name">
                数据变更
            </div>
            <div class="code-name">.icon-shujubiangeng
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caigou"></span>
            <div class="name">
                05采购
            </div>
            <div class="code-name">.icon-caigou
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-danju-xianxing"></span>
            <div class="name">
                25单据-线性
            </div>
            <div class="code-name">.icon-danju-xianxing
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiaosequnti"></span>
            <div class="name">
                226角色、群体
            </div>
            <div class="code-name">.icon-jiaosequnti
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fq_jiagong"></span>
            <div class="name">
                fq_加工
            </div>
            <div class="code-name">.icon-fq_jiagong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qitadingdan"></span>
            <div class="name">
                其他订单
            </div>
            <div class="code-name">.icon-qitadingdan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
                日历
            </div>
            <div class="code-name">.icon-rili
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiagongzhongxin"></span>
            <div class="name">
                加工中心
            </div>
            <div class="code-name">.icon-jiagongzhongxin
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xiugaidingdan"></span>
            <div class="name">
                修改订单
            </div>
            <div class="code-name">.icon-xiugaidingdan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-chengzhong"></span>
            <div class="name">
                称重
            </div>
            <div class="code-name">.icon-chengzhong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-chengpinguanli"></span>
            <div class="name">
                成品管理
            </div>
            <div class="code-name">.icon-chengpinguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gongyidan"></span>
            <div class="name">
                工艺单
            </div>
            <div class="code-name">.icon-gongyidan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tianshenpi"></span>
            <div class="name">
                提案审批
            </div>
            <div class="code-name">.icon-tianshenpi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shengchengdaima"></span>
            <div class="name">
                生成代码
            </div>
            <div class="code-name">.icon-shengchengdaima
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-cangku_kucun"></span>
            <div class="name">
                仓库_库存
            </div>
            <div class="code-name">.icon-cangku_kucun
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-daibanrenwu"></span>
            <div class="name">
                待办任务
            </div>
            <div class="code-name">.icon-daibanrenwu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xiaoxitongzhi"></span>
            <div class="name">
                消息通知
            </div>
            <div class="code-name">.icon-xiaoxitongzhi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-dici"></span>
            <div class="name">
                地磁
            </div>
            <div class="code-name">.icon-dici
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-dingdandingdanchaxun"></span>
            <div class="name">
                118订单、订单查询
            </div>
            <div class="code-name">.icon-dingdandingdanchaxun
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weiwaifeiyong"></span>
            <div class="name">
                Cost-委外费用-1
            </div>
            <div class="code-name">.icon-weiwaifeiyong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weiwaishengchan"></span>
            <div class="name">
                production-委外生产-1
            </div>
            <div class="code-name">.icon-weiwaishengchan
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wuliaoguanli"></span>
            <div class="name">
                物料管理
            </div>
            <div class="code-name">.icon-wuliaoguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-banzu"></span>
            <div class="name">
                班组
            </div>
            <div class="code-name">.icon-banzu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wj-rz"></span>
            <div class="name">
                文件-日志
            </div>
            <div class="code-name">.icon-wj-rz
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-kesuguanli-"></span>
            <div class="name">
                客诉管理
            </div>
            <div class="code-name">.icon-kesuguanli-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caigoudingdan-"></span>
            <div class="name">
                采购订单
            </div>
            <div class="code-name">.icon-caigoudingdan-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tubiao_chengpinku"></span>
            <div class="name">
                成品库
            </div>
            <div class="code-name">.icon-tubiao_chengpinku
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tubiao_chejian"></span>
            <div class="name">
                车间
            </div>
            <div class="code-name">.icon-tubiao_chejian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-BOM"></span>
            <div class="name">
                BOM
            </div>
            <div class="code-name">.icon-BOM
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-banchengpinMRBpingshenliucheng"></span>
            <div class="name">
                (半)成品MRB评审流程
            </div>
            <div class="code-name">.icon-banchengpinMRBpingshenliucheng
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gongyingshang"></span>
            <div class="name">
                供应商
            </div>
            <div class="code-name">.icon-gongyingshang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bom"></span>
            <div class="name">
                bom
            </div>
            <div class="code-name">.icon-bom
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-bofangjilu"></span>
            <div class="name">
                播放记录
            </div>
            <div class="code-name">.icon-bofangjilu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-dingdan1"></span>
            <div class="name">
                订单
            </div>
            <div class="code-name">.icon-dingdan1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gongyiliuchengtu"></span>
            <div class="name">
                工艺流程图
            </div>
            <div class="code-name">.icon-gongyiliuchengtu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weiwaifahuo"></span>
            <div class="name">
                委外发货
            </div>
            <div class="code-name">.icon-weiwaifahuo
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-weiwaidaohuo"></span>
            <div class="name">
                委外到货
            </div>
            <div class="code-name">.icon-weiwaidaohuo
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-guangzhougufeiicon-"></span>
            <div class="name">
                工艺
            </div>
            <div class="code-name">.icon-guangzhougufeiicon-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gfgongyitu"></span>
            <div class="name">
                gf工艺图
            </div>
            <div class="code-name">.icon-gfgongyitu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujuxiaoyan-"></span>
            <div class="name">
                数据校验-2
            </div>
            <div class="code-name">.icon-shujuxiaoyan-
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gongshi"></span>
            <div class="name">
                工时
            </div>
            <div class="code-name">.icon-gongshi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-gongyingshang1"></span>
            <div class="name">
                供应商
            </div>
            <div class="code-name">.icon-gongyingshang1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-caidanlan-caigou-caigouzaituhuizong"></span>
            <div class="name">
                菜单栏-采购-采购在途汇总
            </div>
            <div class="code-name">.icon-caidanlan-caigou-caigouzaituhuizong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yangpinguanli"></span>
            <div class="name">
                样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fuliaocang"></span>
            <div class="name">
                辅料仓
            </div>
            <div class="code-name">.icon-fuliaocang
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-fuliao1"></span>
            <div class="name">
                辅料
            </div>
            <div class="code-name">.icon-fuliao1
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shengchanjihua"></span>
            <div class="name">
                生产计划
            </div>
            <div class="code-name">.icon-shengchanjihua
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-anjianfengexian"></span>
            <div class="name">
                按键分割线
            </div>
            <div class="code-name">.icon-anjianfengexian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
                时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
                二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wenben"></span>
            <div class="name">
                符号-文本
            </div>
            <div class="code-name">.icon-wenben
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tiaoxingma"></span>
            <div class="name">
                条形码
            </div>
            <div class="code-name">.icon-tiaoxingma
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
            <div class="name">
                表单组件-表格
            </div>
            <div class="code-name">.icon-biaodanzujian-biaoge
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
                图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-calendar-v2-full"></span>
            <div class="name">
                日历,日期
            </div>
            <div class="code-name">.icon-calendar-v2-full
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
                搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jianlijiankong"></span>
            <div class="name">
                简历监控
            </div>
            <div class="code-name">.icon-jianlijiankong
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-jiaoseyonghu"></span>
            <div class="name">
                角色用户
            </div>
            <div class="code-name">.icon-jiaoseyonghu
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-kuozhangongneng"></span>
            <div class="name">
                扩展功能
            </div>
            <div class="code-name">.icon-kuozhangongneng
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qudaoguanli"></span>
            <div class="name">
                渠道管理
            </div>
            <div class="code-name">.icon-qudaoguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shaixuantiku"></span>
            <div class="name">
                筛选题库
            </div>
            <div class="code-name">.icon-shaixuantiku
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shenpiguanli"></span>
            <div class="name">
                审批管理
            </div>
            <div class="code-name">.icon-shenpiguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yijiandaoruwaibujianli"></span>
            <div class="name">
                一键导入外部简历
            </div>
            <div class="code-name">.icon-yijiandaoruwaibujianli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xitongpeizhi"></span>
            <div class="name">
                系统配置
            </div>
            <div class="code-name">.icon-xitongpeizhi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-wangzhanguanli"></span>
            <div class="name">
                网站管理
            </div>
            <div class="code-name">.icon-wangzhanguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-zhiweimoban"></span>
            <div class="name">
                职位模版
            </div>
            <div class="code-name">.icon-zhiweimoban
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujujiegou-01"></span>
            <div class="name">
                数据结构-01
            </div>
            <div class="code-name">.icon-shujujiegou-01
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujubaobiao"></span>
            <div class="name">
                数据报表
            </div>
            <div class="code-name">.icon-shujubaobiao
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shujutongji"></span>
            <div class="name">
                数据统计
            </div>
            <div class="code-name">.icon-shujutongji
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
                首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-quanxianguanli"></span>
            <div class="name">
                权限管理
            </div>
            <div class="code-name">.icon-quanxianguanli
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-xitongshezhi"></span>
            <div class="name">
                系统设置
            </div>
            <div class="code-name">.icon-xitongshezhi
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-yujing"></span>
            <div class="name">
                预警
            </div>
            <div class="code-name">.icon-yujing
            </div>
        </li>

        <li class="dib">
            <span class="icon iconfont icon-qiyeguanli"></span>
            <div class="name">
                企业管理
            </div>
            <div class="code-name">.icon-qiyeguanli
            </div>
        </li>

    </ul>
    <!-- 切换区域 END -->
    <script>
        const nameList = document.querySelectorAll('.name')
        const iconClassList = document.querySelectorAll('.code-name')
        const btn = document.querySelector('.btn')
        const arr = []
        nameList.forEach((item, index) => {
            const textItem = iconClassList[index].innerText
            const ind = textItem.indexOf('-')
            const text = iconClassList[index].innerText.slice(ind + 1, textItem.length)
            arr.push({
                nickname: item.innerText,
                name: text
            })
        })

        // 生成JSON文件
        const saveJSON = (data, filename = 'icon.json') => {
                if (!filename) filename = "json.json";
                data = JSON.stringify(data, undefined, 4);
                var blob = new Blob([data], {
                        type: "text/json"
                    }),
                    e = document.createEvent("MouseEvents"),
                    a = document.createElement("a");
                a.download = filename;
                a.href = window.URL.createObjectURL(blob);
                a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
                e.initMouseEvent(
                    "click",
                    true,
                    false,
                    window,
                    0,
                    0,
                    0,
                    0,
                    0,
                    false,
                    false,
                    false,
                    false,
                    0,
                    null
                );
                a.dispatchEvent(e);
            }
            // 点击 生成JSON文件
        btn.addEventListener('click', () => {
            saveJSON(arr)
        })
    </script>

</html>